<template>
	<div class="supervise_main">
		<div class="mesg_tit">坐席客服监管</div>
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formSuperviseSearch" class="superviseFormMain">
		        <el-form-item label="客服姓名">
		          <el-input v-model="formSuperviseSearch.name"  placeholder="客服姓名"></el-input>
		        </el-form-item>
		        <el-form-item label="客服工号">
		          <el-input v-model="formSuperviseSearch.staff" placeholder="客服工号"></el-input>
		        </el-form-item>
		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="searchBtn">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="superviseTable"
	        stripe
	        border
	        style="width: 100%">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="name"
	          label="客服姓名"
	          width="100">
	        </el-table-column>
	        <el-table-column
	          prop="staff"
	          label="客服工号">
	        </el-table-column>
	         <el-table-column
	          prop="status"
	          label="在线状态"
	          width="100">
	        </el-table-column>
	         <el-table-column
	          prop="device"
	          label="分机号码"
	          width="100">
	        </el-table-column>
	        <el-table-column
	          prop="callerid"
	          label="客户号码"
	          width="120">
	        </el-table-column>
	         <el-table-column
	          prop="callin"
	          label="已接听数"
	          width="80">
	        </el-table-column>
	       <el-table-column
	          prop="callout"
	          label="已呼出数"
	          width="80"
	          >
	        </el-table-column>
	        
	        <el-table-column
	          fixed='right'
	          width="150"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                @click="handleMonitor(scope.$index, scope.row)">监听</el-button>
	              <el-button
	              	type="warning"
	                size="mini"
	                @click="handleControl(scope.$index, scope.row)">接管</el-button>
	             <el-button
	              	type="danger"
	                size="mini"
	                @click="handleHang(scope.$index, scope.row)">挂断</el-button>
	            </template>
	        </el-table-column>
	      </el-table>

	  </div>
	

	</div>
</template>
<script>
import bus from '@/api/bus'
import {
	pbxUserServiceList, 
	pbxUserServiceMonitor, 
	pbxUserServiceControl,
	getUserByUid,
	pbxUserServiceHang} from '@/api'
  export default {
    data() {
      return {
       	formSuperviseSearch: {//查询条件
          name: '',
          staff: '',
          page:'',
    	    size:''
        },
        superviseTable:[],
      };
    },
    created(){//初次数据的显示
    	let params={
    		name: this.formSuperviseSearch.name,
			  staff: this.formSuperviseSearch.staff,
    		page:'',
    		size:''
    	}
    	this.searchTable(params);
    	setInterval(this.searchBtn,1000)
    },
    methods:{
    	searchTable (params) {//调入查询接口
				pbxUserServiceList (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.superviseTable = data;
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				});
	 		},
			searchBtn (){ //查询按钮事件
				let params={
					name: this.formSuperviseSearch.name,
					staff: this.formSuperviseSearch.staff
				}
				this.searchTable(params);
			},
			handleMonitor (index,row) { //监听按钮调用监听接口
				let currentDivicePhone = sessionStorage.getItem('device');//session中的分机号码(当前登录人的分机号,坐席经理的权限)
				let params={ //入参只有通话分机号码divice1和监听号码divice2
					device1: row.device,
					device2: currentDivicePhone
				}
				pbxUserServiceMonitor(params).then(res => {
					//console.log(res)
					let code = res.data.code;//通过code判断是否有数据
					if(code == 0) {
						let params = {//查询的传人参数
							name: this.formSuperviseSearch.name,
							staff: this.formSuperviseSearch.staff
						}
						this.searchTable(params);//监听之后重新调用查询接口
					} else if(code == 1) {
						this.$message({
							message: '通话中分机号错误'
						});
					} else if(code == 2) {
						this.$message({
							message: '监听分机号错误'
						});
					} else if(code == 3) {
						this.$message({
							message: '监听失败'
						});
					}
				});
			},
			handleControl (index,row){ //接管调用
				let currentDivicePhone = sessionStorage.getItem('device');
				let params={ //入参只有通化号码divice1和转接号码device2
					device1: row.device,
					device2: currentDivicePhone
				}
				pbxUserServiceControl(params).then(res => {
					//console.log(res)
					let code = res.data.code;//通过code判断是否有数据
					if(code == 0) {
						// let params = {//查询的传人参数
						// 	name: this.formSuperviseSearch.name,
						// 	staff: this.formSuperviseSearch.staff
						// }
						// this.searchTable(params);//监听之后重新调用查询接口
						this.$router.push({
							path: '/home/oncall',
							query:{
								callPhone: row.callerid
							}
						})
						bus.$emit('hideEvent', true)
					} else if(code == 1) {
						this.$message({
							message: '通话中分机号错误'
						});
					} else if(code == 2){
						this.$message({
							message: '转接目标分机号错误'
						});
					} else if(code == 3){
						this.$message({
							message: '转接失败'
						});
					}
				});
			},
			handleHang (index,row){ //挂断调用
				let params={ //入参只有通化号码divice
					device: row.device
				}
				pbxUserServiceHang(params).then(res => {
					//console.log(res)
					let code = res.data.code;//通过code判断是否有数据
					if(code == 0) {
						let params = {//查询的传人参数
							name: this.formSuperviseSearch.name,
							staff: this.formSuperviseSearch.staff
						}
						this.searchTable(params);//监听之后重新调用查询接口
					} else if(code == 1) {
						this.$message({
							message: '分机号错误'
						});
					} else if(code == 3) {
						this.$message({
							message: '挂断失败'
						});
					}
				});
			},
		}
	};
</script>
<style scoped>

</style>